<template>
	<view class="page">
		<customNavBar1 :title="titles" style='color: #111 !important;'></customNavBar1>
		<!-- <image src="" mode=""></image> -->
		<image class="bg" src="https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png"></image>
		<view class="hander-one" :style="{'padding-top':(mt)+'px'}">
			<view class="info">
				<view class="info-title">
					{{fromData.jointName}}
				</view>
			</view>
			<view class="cardList">
				<view class="topInfo">
					<view class="page-one">
						<view class="name" style="font-weight: 600;">
							船票信息
							<!-- 天悦葡萄湾海景公寓 -->
						</view>
						<view class="two-center-two" style="display: flex; justify-content: space-between;">
							<view class="" style="font-size: 30rpx; color: #333333; font-weight: Bold;">
								{{boattime}} {{fromData.sailTime}} 出发
							</view>
							<view class=""
								style="font-size: 26rpx; color: #808080; font-weight: Regular; display: flex; align-items: center;">
								<u-icon name="clock" color="#808080" size="26"></u-icon>
								<span>{{timeMemosStr==null?'':timeMemosStr}}</span>
							</view>
						</view>
						<view class=""
							style="font-size: 32rpx; color: #333333; font-weight: Bold; margin: 24rpx 0 30rpx;">
							{{fromData.startPortName}}- {{fromData.endPortName}}
						</view>
						<view class="" style="font-size: 24rpx; color: #808080; font-weight: Regular;">
							{{fromData.lineNum}}次 | {{fromData.clxm}} | {{fromData.className}}
						</view>
					</view>
				</view>
				<view class="topInfo1">
					<view class="page-one">
						<view class="name" style="font-weight: 600;">
							<!-- {{homestayName}} -->
							住宿信息
							<!-- 天悦葡萄湾海景公寓 -->
						</view>
						<view class="two-center-two">

							<view class="df-two">
								<u-row style="margin-bottom: 10px">
									<u-col span="5">
										<view class="demo-layout bg-purple" style="font-weight: 600;">
											{{arriveTime}}月{{arriveTimes}}日
											<text
												style="font-size: 24rpx; color: #111111; font-weight: 500; margin: 0 10rpx;">{{fromData.departWeek}}</text>
										</view>
									</u-col>
									<u-col span="2">
										<view class="demo-layout bg-purple-light">{{count}}晚</view>
									</u-col>
									<u-col span="5">
										<view class="demo-layout bg-purple-dark" style="font-weight: 600;">
											{{leaveTime.length>2?leaveTime.substring(5,7):leaveTime}}月{{leaveTimes}}日
											<text
												style="font-size: 24rpx; color: #111111; font-weight: 500; margin: 0 10rpx;">{{fromData.departWeeks}}</text>
										</view>
									</u-col>
								</u-row>
							</view>
							<view class="cardList1">
								<view class="card-title" style="font-weight: bold; margin: 10rpx 0; font-size: 28rpx;">
									{{MyName}}
								</view>
								<view class="card-text">
									{{itemList.num}}张 · {{itemList.category}} · {{itemList.size}} ·
									{{fromData.breakfastType==0?'无早':'含早'}}
								</view>
							</view>
							<view class="num" style="margin: 30rpx 0;">
								<text style="font-weight: bold; margin: 10rpx 0; font-size: 28rpx;">预订房间数</text>
								<!-- 	<text v-if="valStatus"
									style="font-size: 30rpx; color: #333333; font-weight: bold;margin-left: -150rpx;">
									最多可定{{checkInRooms}}套
								</text> -->
								<u-number-box v-model="DateList.hotelOrder.checkInRooms" min='1' :max="checkInRooms"
									@overlimit='valChange' @change='valChange'>
									<view slot="minus" class="minus">
										<!-- <u-icon name="minus" size="22"></u-icon> -->
										<image
											src="https://i.ringzle.com/file/20240418/e8e77fead6f1470c9cea00291d1e4dab.png"
											mode=""></image>
									</view>
									<text slot="input" class="input">{{DateList.hotelOrder.checkInRooms}}</text>
									<view slot="plus" class="plus">
										<!-- <u-icon name="plus" color="#fff" size="22"></u-icon> -->
										<image
											src="https://i.ringzle.com/file/20240418/09449e9f30dd4d8bb49789253a26a018.png"
											mode=""></image>
									</view>
								</u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="notice_info">
					<u-icon name="info-circle" color="#FEA400" size="32rpx"></u-icon>
					<text>免票儿童也须购票。每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，请您在购票的同时登记携童实名信息。超过2人时，应按超过的人数购买半价票。</text>
				</view>
				<view class="passenger">
					<view class="p_title">
						<text>乘客信息</text>
						<span>最多可添加{{personLimit}}人</span>
					</view>
					<view class="p_add" @tap="toAddPassenger">
						<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png" mode="">
						</image>
						<text>添加乘客</text>
					</view>
					<view class="passengers">
						<view class="p_item_new" v-for="(item,index) in passengerList" :key="index">
							<view class="pin_top">
								<image class="p_del" src="@/static/index/steamerTicket/icon_delete.jpg"
									@tap="delPassenger(item,index)"></image>
								<view class="pint_right">
									<view class="pintr_info">
										<text class="name">{{item.nameCopy}}</text>
										<text class="card">{{cardCfg[item.cardType]}} {{item.cardCopy}}</text>
										<view class="type">{{typeCfg[item.personType]||''}}</view>
									</view>
									<view class="pintr_add" v-if="item.personType==1">
										<text>携带免票儿童：{{(item.mpChildList&&item.mpChildList.length)||0}}</text>
										<view class="add" @tap="addMpChild(item,index)"><span>+</span><text>添加</text>
										</view>
									</view>
								</view>
							</view>
							<view class="pin_childs" v-if="item.mpChildList&&item.mpChildList.length>0">
								<view class="pc_item" v-for="(mpc,idx) in item.mpChildList" :key="idx">
									<text class="title">携童{{idx+1}}</text>
									<text class="name">{{mpc.nameCopy}}</text>
									<text class="card">{{cardCfg[mpc.cardType]}} {{mpc.cardCopy}}</text>
									<view class="type">{{typeCfg[mpc.personType]||''}}</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="contacts">
					<view class="c_info">
						<text>联系人信息</text>
						<view class="ci_inp mt48">
							<text>姓名</text>
							<input type="text" v-model="PassengersName" @blur="setName" @confirm="setName"
								placeholder="请填写姓名">
						</view>
						<view class="ci_line"></view>
						<view class="ci_inp">
							<text>手机号</text>
							<input type="phone" v-model="DateList.hotelOrder.guestPhone" @blur="setPhone"
								@confirm="setPhone" placeholder="请填写手机号">
						</view>

					</view>
				</view>
				<!-- 	<view class="ci_inp_btn">
					<text>优惠卷</text>
					
					<input type="text" v-model="sale" @blur="sale" @confirm="sale" placeholder="暂无可用优惠卷">
					<u-icon name="arrow-right"></u-icon>
				</view> -->

				<view class="cellBox" @click="couponList">
					<view class="cellBox-left">
						<text slot="icon" class="icon">券</text>
						<view slot="title" class="title">
							<text>优惠券</text>
						</view>
					</view>
					<view class="cellBox-right">
						<view class="cellBox-text">
							<text v-if="coupon.length==0">暂未选择优惠券</text>
							<text v-else>{{coupon.name}}</text>
						</view>
						<view class="image">
							<image src="https://i.ringzle.com/file/20240123/3cf0f794b73d4cf691371408fbd3b5e3.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>

				<!-- 	<view class="agree">
					<text>我已阅读</text>
					<text @tap="showXy">《船票+住宿预订及退改须知》</text>
					<text>《船票+住宿预订及退改须知》</text>
					<text>,并同意条款</text>
				</view> -->
				<view class="bottom">
					<view class="b_left">
						<text>待支付</text>
						<!-- <view>￥<span>{{price}}</span></view> -->
						<view><span class="b_span1">￥</span>
						<span class="b_span" v-if="coupon.length==0">{{Math.round(TheTotalAmount*100)/100}}</span>
						<span class="b_span" v-else-if="coupon.length!=0&&TheTotalAmount>coupon.price">{{Math.round((TheTotalAmount - coupon.price)*100)/100}}</span>
						<span class="b_span" v-else>0.01</span>
						</view>
					</view>
					<view class="b_right">
						<view class="br_left" @tap="showTicketMx">
							<text>明细</text>
							<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
						</view>
						<view class="br_right" @tap="createOrder">
							去支付
						</view>
					</view>
				</view>
				<!-- 预订协议 -->
				<u-modal :show="showAgree" :title="title" :content='content' confirmText='已知晓' confirmColor='#007A69'
					@confirm="confirm"></u-modal>
				<u-popup :show="detailsShow" @close="detailsShow=false">
					<view class="details">
						<view class="title">
							<text>费用明细</text>
							<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false">
							</image>
						</view>
						<view>
							<!-- <view class="address">{{item.startPortName}}-{{item.endPortName}}</view> -->
							<view class="tickets" v-for="(item,index) in mxList" :key="index"
								v-if="mxList.length>0&&item.num>0">
								<view class="titles" style="font-size: 32rpx; font-weight: 600; color: #333333;">
									船票
								</view>
								<text>{{item.type}}</text>
								<view>￥{{item.price}}<span>X{{item.num}}</span></view>
							</view>
							<view class="tickets" v-if="mpTicketNum">
								<view class="titles" style="font-size: 32rpx; font-weight: 600; color: #333333;">
									船票
								</view>
								<text>免票儿童</text>
								<view>￥0<span>X{{mpTicketNum}}</span></view>
							</view>
							<view class="tickets-two">
								<view class="titles" style="font-size: 32rpx; font-weight: 600; color: #333333;">
									酒店
								</view>
								<view class="price" style="">
									<text>{{homestayName}}</text>
									<text>￥{{roomTotalPrice}}</text>
								</view>
								<view class="text">
									<text v-for="(item,index) in detailRoomPriceList" :key="index"> {{MyName}} ￥{{item.price}} × {{item.rooms}}间 × {{count}}晚</text>
								</view>
							</view>
							<view class="tickets" v-if="coupon.length!=0">
								<view class="titles" style="font-size: 32rpx; font-weight: 600; color: #333333;">
									优惠券抵扣
								</view>
								
								<view>￥-{{coupon.price}}</span></view>
							</view>
							<view class="total">
								<text>合计</text>
								<view style="color: #FF4141;">￥</span><span  v-if="coupon.length==0">{{Math.round(TheTotalAmount*100)/100}}</span>
						<span v-else-if="coupon.length!=0&&TheTotalAmount>coupon.price">{{Math.round((TheTotalAmount - coupon.price)*100)/100}}</span>
						<span v-else>0.01</span></view>
							</view>
						</view>

						<view class="bottom">
							<view class="b_left">
								<text>待支付</text>
								<view><span class="b_span1">￥</span><span class="b_span" v-if="coupon.length==0">{{Math.round(TheTotalAmount*100)/100}}</span>
						<span class="b_span" v-else-if="coupon.length!=0&&TheTotalAmount>coupon.price">{{Math.round((TheTotalAmount - coupon.price)*100)/100}}</span>
						<span class="b_span" v-else>0.01</span>
								</view>
							</view>
							<view class="b_right">
								<view class="br_left" @tap="detailsShow=false">
									<text>明细</text>
									<image src="@/static/index/steamerTicket/icon_xjt.jpg" mode=""></image>
								</view>
								<view class="br_right" @tap="createOrder">
									去支付
								</view>
							</view>
						</view>
					</view>
				</u-popup>
				<WechatPay ref="wxPay" @confirmPay="toPay" @cancelPay="cancelPay"></WechatPay>
				<u-popup :show="addShow" @close="addShow=false">
					<view class="details">
						<view class="title">
							<text>乘客信息</text>
							<image src="@/static/index/steamerTicket/icon_close.png" @tap="addShow=false"></image>
						</view>
						<view class="has_info">
							<view class="add_user" @tap="addPerson">
								<image src="https://i.ringzle.com/file/20240415/5f00b972fc0e4e3da82e16f726cb2468.png"
									mode="">
								</image>
								<text>新增</text>
							</view>
							<view class="add_list" v-if="addList.length>0">
								<u-swipe-action>
									<u-swipe-action-item :options="options" v-for="(item, index) in addList"
										:key="index" @click="deletePerson(item)" :ref="'swipeAction' + index"
										v-if="item.passengerName">
										<view class="swipe-action u-border-top u-border-bottom">
											<view class="swipe-action__content">
												<view class="sac_item">
													<image class="chk" @tap="selectPerson(index,item)"
														:src="item.isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
													</image>
													<view class="si_info">
														<view class="name">
															<view>{{item.passengerNameCopy}}</view>
															<view style="width: 104rpx !important;">
																{{typeCfg[item.personType]}}
															</view>
														</view>
														<view class="idcard">
															<text>{{cardCfg[item.cardType]}}</text>
															<text>{{item.cardCopy}}</text>
														</view>
													</view>
													<image class="edit"
														src="@/static/my/commonInformation/icon_edit.png"
														@tap="toEdit(item)"></image>
												</view>
											</view>
										</view>
									</u-swipe-action-item>
								</u-swipe-action>
							</view>
						</view>
						<view class="add_submit" @tap="confirmAdd">确定</view>
					</view>
				</u-popup>
				<!-- 授权手机登录 -->
				<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>


				<!-- 非本地人公共舱不足提示 -->
				<view class="local_box" v-if="localShow" :style="{'height':(h+90)+'px'}">
					<view class="lb_content">
						<view class="lbc_tip">该舱位公共舱座位已售罄，若您非本地居民，请选择其他舱位或航班。</view>
						<view class="lbc_btn" @tap="confirmTip">确定</view>
						<image src="https://i.ringzle.com/file/20240429/1876883b5065422a9d5b96518f421ed8.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 预订时免票儿童提示 -->
		<view class="local_box" v-if="mpTipShow" :style="{'height':'100%'}">
			<view class="lb_content">
				<view class="lbc_tip">免票儿童需购买<span style="font-weight: bolder;">0元票</span>，请确认是否已添加出行儿童信息，以免耽误行程。</view>
				<view class="lbc_btns">
					<view class="lb_qx" @tap="mpTipShow=false">取消</view>
					<view class="lb_qd" @tap="confirmMpAdd">确定</view>
				</view>
				<image src="https://i.ringzle.com/file/20240429/1876883b5065422a9d5b96518f421ed8.png"></image>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import WechatPay from '@/compoments/wechatPay/index.vue'
	import login from '../../utils/login';
	export default {
		name: 'passengerPay',
		components: {
			GetPhoneNumber,
			customNavBar1,
			WechatPay
		},
		data() {
			return {
				titles: '填写订单',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				phone: '',
				item: '',
				guestName: '',
				guestPhone: JSON.parse(uni.getStorageSync('userInfo')).mobile,
				remarks: '',
				agree: false,
				show: false,
				price: 0,
				detailsShow: false,
				passengerList: [],
				passengerCarList: [],
				addShow: false,
				addList: [],
				typeCfg: {
					1: '成人票',
					2: '儿童票',
					3: '免票儿童',
					4: '老人票'
				},
				cardCfg: this.$uct.typeToText,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				carShow: false,
				// goback: false,
				cfDate: '',
				cfWeek: '',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				lsKey: '',
				mxList: [],
				orderId: '',
				fromData: {},
				arriveDate: '',
				fromDatas: {
					arriveDate: '',
					houseBaseId: '',
					leaveDate: '',
					homestayId: '',
				},
				roomNumber: '1',
				MyName: '',
				itemList: {},
				arriveTime: 10,
				arriveTimes: 24,
				leaveTime: 10,
				leaveTimes: 25,
				count: 1,
				totalPrice: '',
				halfPrice: '',
				contactNum: '',
				homestayName: '',
				bottomPrice: '',
				checkInRooms: 1,
				// 传递提交参数
				DateList: {
					"hotelOrder": {
						arriveDate: '',
						leaveDate: "",
						checkInRooms: 1,
						guestName: '',
						guestPhone: JSON.parse(uni.getStorageSync('userInfo')).mobile,
						homestayId: "",
						houseBaseId: "",
						jointName: "",
						openId: '',
						remarks: '',
						roomAmount: '',
						jointId: ''
					},

					"shipOrder": {
						linkPhone: '',
						contactNum: '',
						credentialNum: '',
						// credentialType: 1,
						expireTime: '',
						foreOrderItemReqs: [],
						totalFee: '',
						totalPayFee: "",
						openId: '',

						lineNum: '',
						lineName: '',
						lineNo: '',
						shipName: '',
						startPortNo: '',
						startPortName: '',
						endPortNo: '',
						endPortName: '',
						sailDate: '',

						sailTime: '',
						busStartTime: '',
						sx: '',
						linkPerson: '',
						lineDirect: '',
						saleBeginTime: '',
						saleEndTime: '',
						stopSaleTime: '',
						onSale: true,
						offSaleMsg: '',
						buyTicketType: 1,
						clxh: '',
						clxm: '',
						hxlxh: '',
						hxlxm: '',
						bus: '',
						bus2: '',
						lineState: 0,
						lineStateName: '',
						embarkPortName: '',
						freeChildCount: '',
						candidateTimeEnd: '',
						portMemos: '',
						timeMemosStr: '',

					}
				},
				title: '预订协议',
				content: '',
				showAgree: false,
				TheTotalAmount: "",
				time: '',
				timeMemosStr: '',
				boattime: '',
				localShow: false,

				mpChild: false, //查询乘客信息时是否查免票儿童的数据
				mpIndex: '',
				personLimit: 10, //最多可添加乘客的数量
				mpTipShow: false,
				mpTicketNum: '', //免票儿童票数量
				PassengersName: '',

				roomInfos:[],
				roomIdList:[],
				roomTotalPrice:'',
				detailRoomPriceList:[],
				coupon:[]
			}
		},


		onLoad(option) {
			//获取乘客
			this.getPassengers();
			let obj = uni.getStorageSync('submitOrderSearchList');
			let objList = JSON.parse(decodeURIComponent(obj))
			this.fromData = objList
			this.item = objList
			this.time = this.item.time
			this.timeMemosStr = this.item.timeMemosStr
			this.boattime = this.item.sailDateTime.slice(5, 10)

			// 时间处理
			let arriveDateone = objList.arriveDate.slice(5, 7)
			let arriveDatestwo = objList.arriveDate.slice(8, 10)
			this.arriveDate = arriveDateone + '-' + arriveDatestwo
			// this.arriveTime = opt.arriveDate.slice(5, 7); // 截取第一个字符
			// this.arriveTimes = opt.arriveDate.slice(8, 10); // 截取第一个字符
			this.homestayName = objList.homestayName
			this.DateList.hotelOrder.jointName = objList.jointName
			this.fromDatas.arriveDate = objList.arriveDate
			this.fromDatas.leaveDate = objList.leaveDate
			this.fromDatas.homestayId = objList.homestayId
			this.fromDatas.houseBaseId = objList.houseBaseId
			this.MyName = objList.name
			this.itemList = objList.bedData[0]
			this.count = objList.count

			this.arriveTime = objList.arriveDate.slice(5, 7); // 截取第一个字符
			this.arriveTimes = objList.arriveDate.slice(8, 10); // 截取第一个字符

			this.leaveTime = objList.leaveDate.slice(5, 7); // 截取第一个字符
			this.leaveTimes = objList.leaveDate.slice(8, 10); // 截取第一个字符


			// let opt = JSON.parse(wx.getStorageSync('cpzsParams'));

			// 提交订单参数 hotelOrder
			// hotelOrder 信息
			this.DateList.hotelOrder.arriveDate = objList.arriveDate
			this.DateList.hotelOrder.leaveDate = objList.leaveDate
			this.DateList.hotelOrder.homestayId = objList.homestayId
			this.DateList.hotelOrder.houseBaseId = objList.houseBaseId

			// this.DateList.hotelOrder.checkInRooms = objList.totalPrice

			// this.DateList.hotelOrder.checkInRooms = objList.roomState



			this.DateList.hotelOrder.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
			// this.DateList.hotelOrder.roomAmount = objList.bottomPricetotalPrice
			// shipOrder
			this.DateList.shipOrder.credentialNum = this.DateList.hotelOrder.guestPhone

			this.totalPrice = objList.totalPrice //舱位价格

			this.DateList.hotelOrder.jointId = uni.getStorageSync('detailsList').id

			let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
			this.DateList.shipOrder.expireTime = new Date(teTime).Format('yyyy-MM-dd hh:mm:ss');





			this.DateList.shipOrder.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
			this.DateList.shipOrder.lineNum = objList.lineNum
			this.DateList.shipOrder.lineNo = objList.lineNo
			this.DateList.shipOrder.lineName = objList.lineName
			this.DateList.shipOrder.shipName = objList.shipName


			this.DateList.shipOrder.startPortName = objList.startPortName
			this.DateList.shipOrder.startPortNo = objList.startPortNo
			this.DateList.shipOrder.endPortNo = objList.endPortNo



			this.DateList.shipOrder.endPortName = objList.endPortName
			this.DateList.shipOrder.sailDate = objList.sailDate
			this.DateList.shipOrder.sailDate = this.DateList.shipOrder.sailDate.replace(/\//g, '-');
			this.DateList.shipOrder.sailTime = objList.sailTime
			this.DateList.shipOrder.busStartTime = objList.busStartTime
			this.DateList.shipOrder.sx = objList.sx



			this.DateList.shipOrder.lineDirect = objList.lineDirect
			this.DateList.shipOrder.saleBeginTime = objList.saleBeginTime
			this.DateList.shipOrder.saleEndTime = objList.saleEndTime
			this.DateList.shipOrder.stopSaleTime = objList.stopSaleTime
			this.DateList.shipOrder.onSale = objList.onSale


			this.DateList.shipOrder.offSaleMsg = objList.offSaleMsg
			this.DateList.shipOrder.buyTicketType = objList.buyTicketType
			this.DateList.shipOrder.clxh = objList.clxh
			this.DateList.shipOrder.clxm = objList.clxm
			this.DateList.shipOrder.hxlxh = objList.hxlxh
			this.DateList.shipOrder.hxlxm = objList.hxlxm



			this.DateList.shipOrder.bus = objList.bus
			this.DateList.shipOrder.bus2 = objList.bus2
			this.DateList.shipOrder.lineState = objList.lineState
			this.DateList.shipOrder.lineStateName = objList.lineStateName
			this.DateList.shipOrder.embarkPortName = objList.embarkPortName



			this.DateList.shipOrder.freeChildCount = objList.freeChildCount
			this.DateList.shipOrder.candidateTimeEnd = objList.candidateTimeEnd
			this.DateList.shipOrder.portMemos = objList.portMemos
			this.DateList.shipOrder.timeMemosStr = objList.timeMemosStr
			let shipOrderInfo = objList;
			this.bottomPrice = shipOrderInfo.bottomPrice //房间单价

			this.DateList.shipOrder.seatClass = shipOrderInfo.classNum;
			this.DateList.shipOrder.seatClassName = shipOrderInfo.className;
			this.DateList.shipOrder.foreOrderItemReqs = []

			this.getRoomsList()


		},
		onReady() {
			if (uni.getStorageSync('shipType') && uni.getStorageSync('shipType') == 2) this.carShow = true;
			else this.carShow = false;
		},
		onShow() {
			this.getPassengers();
			let that = this
			uni.$on('updateData',function(data){
				console.log(data);
				if(data){
					that.coupon = data
				}else{
					that.coupon = []
				}
				
			})
		},
		methods: {
			couponList(){
				uni.navigateTo({
				    url: `/pagesMy/coupon/useList?type=7&price=${this.TheTotalAmount}`
				});
			},
			getRoomsList() {
				this.$api.post('/api/hotel/getReserveRooms', this.fromDatas)
					.then(res => {
						this.checkInRooms = res.data.data.checkInRooms

						let checkInTimeStart = res.data.data.checkInTimeStart
						let checkOutTime = res.data.data.checkOutTime
						// this.price = res.data.data.roomAmount
						// this.roomAmount = res.data.data.roomAmount
						// this.fromList.roomAmount = res.data.data.roomAmount
						// // this.RoomsList = res.data.data

						this.DateList.hotelOrder.arriveDate = this.DateList.hotelOrder.arriveDate + ' ' +
							checkInTimeStart
						this.DateList.hotelOrder.leaveDate = this.DateList.hotelOrder.leaveDate + ' ' + checkOutTime
						
						this.roomInfos = res.data.data.roomInfos;
						if(this.roomInfos.length>0){
							this.TheTotalAmount = this.roomInfos[0].roomAmount||0;
							this.roomIdList = [this.roomInfos[0].roomIds];
							this.DateList.hotelOrder.roomAmount = this.roomInfos[0].roomAmount||0;
						} 
						this.detailRoomPriceList = [{price:this.TheTotalAmount,rooms:1}];
						this.roomTotalPrice = this.TheTotalAmount;
					})
			},

			// 房间数量
			valChange(e) {
				this.coupon=[]
				this.valStatus = true
				if (this.checkInRooms != 1) {
					if (e.value != undefined) {
						if (this.checkInRooms >= e.value) {
							// this.DateList.hotelOrder.checkInRooms = e.value
							// this.DateList.hotelOrder.roomAmount = this.price
							// this.roomNumber = e.value

							// this.DateList.hotelOrder.roomAmount = this.bottomPrice * this.roomNumber * this.count;
							// this.price = this.DateList.hotelOrder.roomAmount + this.DateList.shipOrder.totalPayFee;
							// this.TheTotalAmount = this.DateList.hotelOrder.roomAmount + this.DateList.shipOrder
							// 	.totalPayFee;
								
								
							let price = 0;
							let ids = [];
							for (let i = 0; i < e.value; i++) {
								price+=this.roomInfos[i].roomAmount;
								ids.push(this.roomInfos[i].roomIds);
							}
							this.DateList.hotelOrder.checkInRooms = e.value
							this.DateList.hotelOrder.roomAmount = price;
							this.roomTotalPrice = price;
							this.roomNumber = e.value
							this.TheTotalAmount = this.DateList.hotelOrder.roomAmount + this.DateList.shipOrder.totalPayFee;
							this.roomIdList = ids;
							this.dealDetailRoomPrice(e.value);
						} else {
							this.$showToast('没有多余房间');
						}
					} else {
						if (e === "minus") return this.$showToast("最少预定一间");
						else return this.$showToast("没有多余房间");
					}
				} else {
					this.$showToast('没有多余房间');
				}
			},
			//计算明细：房间数和价格
			dealDetailRoomPrice(len){
				let temp = this.roomInfos.slice(0,len);
				let keys = [];
				temp.forEach(t=>{
				    if(!keys.includes(t.roomAmount)) keys.push(t.roomAmount)
				})
				
				let newArr = [];
				keys.forEach(k=>{
				    let rooms = temp.filter(t=>t.roomAmount==k).length;
				    newArr.push({price:k,rooms})
				})
				this.detailRoomPriceList = newArr;
			},
			setName(e) {
				this.PassengersName = e.detail.value;

				this.DateList.hotelOrder.guestName = e.detail.value;

			},
			setPhone(e) {
				this.phone = e.detail.value;
			},
			//获取乘客
			getPassengers() {
				this.lsKey = 'getPassenger';
				this.$login().then(res => {
					if (res === 0) this.toGetPassengers();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			toGetPassengers(callback) {
				this.$api.get('/api/commonPerson/list', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}).then(res => {
					if (res.data.code === 0) {
						this.addList = this.$uct.setPersonType(res.data.data);
						if (this.mpChild) this.addList = this.addList.filter(l => l.personType == 3);
						else this.addList = this.addList.filter(l => l.personType != 3);
						this.addList.forEach((d, i) => {
							d.passengerNameCopy = this.$aesTm.tuomin(d.passengerName, 1);
							d.cardCopy = this.$aesTm.tuomin(d.card, 3);
							this.$set(this.addList[i], 'isSelect', false);
						})
						callback && callback()
					} else this.$showModal(res.data.msg);
				})
			},
			// 协议
			showXy() {
				// uni.showModal({
				// 	title: '预订协议',
				// 	content: '这是预订协议这是预订协议这是预订协议这是预订协议这是预订协议',
				// 	showCancel: false,
				// 	confirmText: '已知晓'
				// })
				this.showAgree = true
			},
			// 已知晓
			confirm() {
				this.agree = true
				this.showAgree = false
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
					else this.$refs['phoneNumber'].show = true;
				})
			},
			cancelPay() {
				uni.redirectTo({
					url: '/pagesMy/steamerTicketStayOrder/details?orderId=' + this.orderId,
				})
			},
			confrimPay() {
				var list = JSON.stringify({
					price: this.TheTotalAmount,
					id: this.orderId
				})
				this.$api.post('/order/icbc/createOrder', { //下单
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								url: '/pagesIndex/submitOrder/paymentSuccess?list=' + list
							})
						})
					}
				})
			},
			//登录成功后处理事件
			loginSuccess(res) {
				if (this.lsKey == 'getPassenger') this.toGetPassengers();
				if (this.lsKey == 'toPay') this.confrimPay();
			},
			// 删除乘客
			delPassenger(item, index) {
				this.coupon = []
				this.passengerList.splice(index, 1);
				this.DateList.shipOrder.foreOrderItemReqs.splice(index, 1);

				item.isSelect = false
				let itemPrice = 0;
				if (item.personType == 1) { //成人
					if (item.discounts) itemPrice = this.item.localPrice; //本地人
					else itemPrice = this.item.totalPrice;
				} else { //儿童
					if (item.discounts) itemPrice = this.item
						.localHalfPrice; //本地人
					else itemPrice = this.item.halfPrice
				}

				// let pricenum -= Math.floor(itemPrice * 100) / 100;
				this.price -= Math.floor(itemPrice * 100) / 100;

				this.price = this.price.toFixed(1)

				this.TheTotalAmount -= Math.floor(itemPrice * 100) / 100;
				this.TheTotalAmount = this.TheTotalAmount.toFixed(1)


				let numPrice = 0
				this.DateList.shipOrder.foreOrderItemReqs.forEach((d, i) => {
					numPrice += d.realFee
				})
				this.DateList.shipOrder.totalPayFee = numPrice

				this.DateList.shipOrder.totalFee = this.item.totalPrice * this.DateList.shipOrder.foreOrderItemReqs.length;

				if (this.mxList.length > 0) {
					if (item.personType == 1 && !item.discounts) this.mxList[0].num--;
					if (item.personType == 1 && item.discounts) this.mxList[1].num--;
					if (item.personType == 2 && !item.discounts) this.mxList[2].num--;
					if (item.personType == 2 && item.discounts) this.mxList[3].num--;
				}
				if (this.price == 0) {
					this.mxList = [];
				}
			},
			editPassenger(item, index) {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
					events: {
						editPassengerSuccess: data => {
							this.toGetPassengers(() => {
								this.passengerList[index] = this.addList.find(d => d.id == item.id);
								this.$set(this.passengerList[index], 'childs', 0);
							});
						}
					}
				})
			},
			reduceChild(index) {
				if (this.passengerList[index].childs === 0) return
				let num = this.passengerList[index].childs - 1;
				this.$set(this.passengerList[index], 'childs', num);
			},
			increaseChild(index) {
				let num = this.passengerList[index].childs + 1;
				this.$set(this.passengerList[index], 'childs', num);
			},
			reduceCarChild(index) {
				if (this.passengerCarList[index].childs === 0) return
				let num = this.passengerCarList[index].childs - 1;
				this.$set(this.passengerCarList[index], 'childs', num);
			},
			increaseCarChild(index) {
				let num = this.passengerCarList[index].childs + 1;
				this.$set(this.passengerCarList[index], 'childs', num);
			},
			addPerson() {
				this.$login().then(res => {
					if (res === 0) {
						uni.navigateTo({
							url: '/pagesMy/commonInformation/add?type=ship',
							events: {
								addPassengerSuccess: data => {
									this.toGetPassengers();
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			addCars() {
				this.$login().then(res => {
					if (res === 0) {
						let selectInfo = {
							passengers: this.passengerList,
							passengerCars: this.passengerCarList
						};
						uni.navigateTo({
							url: '/pagesIndex/steamerTicket/addCar?selectInfo=' + JSON.stringify(
								selectInfo),
							events: {
								addDriverSuccess: data => {
									if (this.item.carInfo) data.cartype = this.item.carInfo.className;
									this.passengerCarList = [...this.passengerCarList, data];
									this.price += this.item.carInfo.totalPrice;
								}
							}
						})
					} else this.$refs['phoneNumber'].show = true;
				})
			},
			editCar(item, index) {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/addCar?item=' + JSON.stringify(item),
					events: {
						addDriverSuccess: data => {
							if (this.item.carInfo) data.cartype = this.item.carInfo.className;
							// this.passengerCarList[index] = data;
							this.$set(this.passengerCarList, index, data);
						}
					}
				})
			},
			//选择乘客
			selectPerson(index, item) {
				if (this.mpChild) {
					if (item.mpSelected) return this.uToastShow('该免票儿童已添加');
					else {
						this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
						let sLen = this.addList.filter(a => a.isSelect).length;
						if (item.isSelect && sLen > 2) {
							return this.uToastShow('每一成人旅客可免费携带(未满6周岁或身高1.2米以下)的儿童2人，超过2人时，应按超过的人数购买半价票。')
						}
					}
					return
				}

				let newCard = JSON.parse(JSON.stringify(item.card));
				this.$api.post('/travel/ship/ticket/passager/iolocal', {
					credentialType: item.cardType,
					credentialNum: this.$aesTm.encrypt(newCard)
				}).then(res => {
					if (res.data.code === 0) {
						if (res.data.data == 0) { //非本地人
							if ((this.item.pubCurrentCount == 0) ||
								(this.item.pubCurrentCount == 0)) {
								this.addShow = false;
								this.localShow = true;
							} else {
								if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
								this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
							}
						} else {
							if (item.isDriver) return this.$showToast('该乘客已成为司机，不可选择');
							this.$set(this.addList[index], 'isSelect', !this.addList[index].isSelect);
						}
					} else this.$showModal(res.data.msg);
				})
				let itemPrice = 0;
				if (item.personType == 1) { //成人
					if (item.isLocal == 1) itemPrice = this.item.localPrice; //本地人
					else itemPrice = this.item.totalPrice;
				} else { //儿童
					if (item.isLocal == 1) itemPrice = this.item.localHalfPrice; //本地人
					else itemPrice = this.item.halfPrice
				}

				this.price -= Math.floor(itemPrice * 100) / 100;
				this.TheTotalAmount -= Math.floor(itemPrice * 100) / 100;

			},
			// 修改乘客
			toEdit(item) {
				uni.navigateTo({
					url: '/pagesMy/commonInformation/add?type=ship&item=' + JSON.stringify(item),
					events: {
						editPassengerSuccess: data => {
							this.toGetPassengers();
						}
					}
				})
			},
			// 添加的那个乘客
			deletePerson(item) {
				this.$api.del('/api/commonPerson', [item.id]).then(res => {
					if (res.data.code === 0) {
						this.addList.forEach((d, i) => {
							this.$refs['swipeAction' + i][0].closeHandler();
						})
						this.toGetPassengers();
						let fidx = this.passengerList.findIndex(d => d.id == item.id);
						if (fidx > -1) this.passengerList.splice(fidx, 1);
					} else this.$showModal(res.data.msg)
				})
			},

			// 乘客添加确定
			async confirmAdd() {
				this.coupon = []
				if (!this.mpChild) {
					let temp = this.addList.filter(d => d.isSelect == true);
					if (temp.length == 0) this.passengerList = [];
					else {
						let clone = JSON.parse(JSON.stringify(this.passengerList));
						this.passengerList = new Array(temp.length);
						temp.forEach((t, i) => {
							let _t = clone.find(c => c.card == t.card);
							if (_t) this.passengerList[i] = _t;
							else this.passengerList[i] = t
						})
					}

					if (this.passengerList.length == 0) return this.$showToast('请至少添加一名乘客');
					let pcount = this.passengerList.length;
					let ccount = 0;
					this.passengerList.forEach(p => ccount += (p.mpChildList ? p.mpChildList.length : 0));
					if (pcount + ccount > this.personLimit) return this.$showToast('最多可添加' + this.personLimit + '名乘客');

					this.DateList.shipOrder.foreOrderItemReqs = []

					let cnum = []
					let cnum_local = []
					let ernum = []
					let ernum_local = []
					this.passengerList.forEach((item, index) => {
						if (item.personType == 1) {
							if (item.isLocal == 0) {
								cnum.push(item)
							} else {
								cnum_local.push(item)
							}
						} else {
							if (item.isLocal == 0) {
								ernum.push(item)
							} else {
								ernum_local.push(item)
							}
						}
					})


					let cnumPrice = cnum.length * this.item.totalPrice
					let cnum_localPrice = cnum_local.length * this.item.localPrice
					let ernumPrice = ernum.length * this.item.halfPrice
					let ernum_localPrice = ernum_local.length * this.item.localHalfPrice
					// let old_manPrice = old_man * this.item.originPrice

					
					let promise = this.passengerList.map(async (d,i)=>{
						d.nameCopy = this.$aesTm.tuomin(d.passengerName, 1);
						d.cardCopy = this.$aesTm.tuomin(d.card, 3);
						this.$set(this.passengerList[i], 'childs', 0);
						if (!this.passengerList[i].mpChildList || this.passengerList[i].mpChildList.length == 0) {
							this.$set(this.passengerList[i], 'mpChildList', []);
						}
						let newCard = JSON.parse(JSON.stringify(d.card));
						await this.getPassagerIolocal(d.cardType,newCard,i)
					})
					await Promise.all(promise);
					this.PassengersName = this.passengerList[0].passengerName;
					this.DateList.hotelOrder.guestName = this.passengerList[0].passengerName;
					this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile;
					this.addShow = false;

					this.mxList = [{
							type: '成人票',
							price: this.item.totalPrice || 0,
							num: cnum.length
						}, {
							type: '成人票(本地)',
							price: this.item.localPrice || 0,
							num: cnum_local.length
						},
						{
							type: '儿童票',
							price: this.item.halfPrice || 0,
							num: ernum.length
						},
						{
							type: '儿童票(本地)',
							price: this.item.localHalfPrice || 0,
							num: ernum_local.length
						},
					];


					this.DateList.shipOrder.totalPayFee = cnumPrice + cnum_localPrice + ernumPrice + ernum_localPrice


					this.DateList.shipOrder.totalFee = this.item.totalPrice * this.passengerList.length;



					this.roomNumber = this.DateList.hotelOrder.checkInRooms



					// this.DateList.hotelOrder.roomAmount = this.bottomPrice * this.roomNumber * this.count;
					this.price = this.DateList.hotelOrder.roomAmount + this.DateList.shipOrder.totalPayFee;
					// this.TheTotalAmount = this.DateList.hotelOrder.roomAmount + this.DateList.shipOrder.totalPayFee;
					this.TheTotalAmount = this.roomTotalPrice + this.DateList.shipOrder.totalPayFee;
					this.toCreateOrder()

				} else {
					let list = this.addList.filter(d => d.isSelect == true);
					let pcount = this.passengerList.length;
					let ccount = 0;
					this.passengerList.forEach(p => ccount += p.mpChildList.length);
					let currentNum = this.passengerList[this.mpIndex].mpChildList.length;
					if (pcount + ccount + list.length - currentNum > this.personLimit) return this.$showToast('最多可添加' +
						this.personLimit + '名乘客');

					list.forEach((d, i) => {
						d.nameCopy = this.$aesTm.tuomin(d.passengerName, 1);
						d.cardCopy = this.$aesTm.tuomin(d.card, 3);
					})
					if (this.mpIndex !== '') this.$set(this.passengerList[this.mpIndex], 'mpChildList', list);
					this.addShow = false;
				}
			},
			getPassagerIolocal(credentialType,newCard,i){
				return new Promise((resolve,reject)=>{
					this.$api.post('/travel/ship/ticket/passager/iolocal', {
						credentialType,
						credentialNum: this.$aesTm.encrypt(newCard)
					}).then(res => {
						if (res.data.code === 0) {
							this.$set(this.passengerList[i], 'discounts', parseInt(res.data.data || 0));
							resolve();
						} else this.$showModal(res.data.msg);
					})
				})
			},
			// 提交订单
			createOrder() {
				this.DateList.shipOrder.linkPhone = this.DateList.hotelOrder.guestPhone;
				this.DateList.shipOrder.linkPerson = this.DateList.hotelOrder.guestName;
				this.DateList.shipOrder.contactNum = this.DateList.hotelOrder.guestPhone;

				let teTime = new Date().setMinutes(new Date().getMinutes() + 5);
				this.DateList.shipOrder.expireTime = new Date(teTime).Format(
					"yyyy-MM-dd hh:mm:ss"
				);
				this.DateList.shipOrder.openId = JSON.parse(uni.getStorageSync("userInfo")).openId;
				// if (this.carShow && this.passengerCarList.length === 0) return this.$showToast('请添加车辆');

				if (this.DateList.shipOrder.foreOrderItemReqs.length === 0)
					return this.$showToast('请添加乘客');
				// if (!this.agree) return this.$showToast('请选择预订协议');
				if (!this.DateList.hotelOrder.guestName) return this.$showToast('请填写联系人姓名');
				if (!this.$reg.mobile(this.DateList.hotelOrder.guestPhone)) return this.$showToast('请填写正确的联系人手机号');

				let exitMp = this.passengerList.find(p => p.mpChildList.length > 0);
				if (!exitMp) return this.mpTipShow = true;

				this.createOrderNewData()

			},
			confirmMpAdd() {
				this.mpTipShow = false;

				this.createOrderNewData()

			},

			createOrderNewData() {
				this.DateList.shipOrder.foreOrderItemReqs = [];
				this.toCreateOrder();
				let newData = JSON.parse(JSON.stringify(this.DateList));
				newData.hotelOrder.guestName = this.$aesTm.encrypt(newData.hotelOrder.guestName);
				newData.hotelOrder.guestPhone = this.$aesTm.encrypt(newData.hotelOrder.guestPhone);
				newData.shipOrder.contactNum = this.$aesTm.encrypt(newData.shipOrder.contactNum);
				newData.shipOrder.credentialNum = this.$aesTm.encrypt(newData.shipOrder.credentialNum);
				newData.shipOrder.linkPerson = this.$aesTm.encrypt(newData.shipOrder.linkPerson);
				newData.shipOrder.linkPhone = this.$aesTm.encrypt(newData.shipOrder.linkPhone);
				newData.shipOrder.foreOrderItemReqs.forEach(d => {
					d.passName = this.$aesTm.encrypt(d.passName);
					d.credentialNum = this.$aesTm.encrypt(d.credentialNum);
				})
				newData.hotelOrder.roomIdList = this.roomIdList;
				newData.discountCouponUserId = this.coupon.id
				this.$api.post('/api/shipHotel/createOrder', newData).then(res => {
					if (res.data.code === 0) {
						this.orderId = res.data.data;
						this.$refs.wxPay.payShow = true;
					} else if (res.data.code === 10003) {
						return this.$showToast('请添加乘客');
					} else if (res.data.msg === '操作失败') {
						return this.$showToast('请重新支付');
					} else this.$showModal(res.data.msg);
				})
			},



			toCreateOrder() {

				this.passengerList.forEach(d => {
					this.DateList.shipOrder.foreOrderItemReqs.push({
						"passName": d.passengerName,
						"priceType": d.personType,
						"credentialNum": d.card,
						"realFee": d.personType == 1 ? (d.discounts ? (this.item.localPrice || 0) : (
							this
							.item.totalPrice || 0)) : (d.discounts ? (this.item
							.localHalfPrice || 0) : (this.item.halfPrice || 0)),

						"passId": 193,
						"freeChildCount": d.childs,
						"ticketFee": this.item.totalPrice || 0,
						"seatClassName": this.DateList.shipOrder.seatClassName || '',
						"credentialType": d.cardType,
						"seatClass": this.DateList.shipOrder.seatClass || '',
						"isLocal": d.isLocal,
						"plateNum": "",
						"freeChildInfo": d.mpChildList.map(m => {
							return {
								parentCredential: this.$aesTm.encrypt(d.card, 3),
								childName: this.$aesTm.encrypt(m.passengerName, 1),
								card: this.$aesTm.encrypt(m.card, 3),
								type: m.cardType || 1
							}
						}),
						"ticPrice":this.item.ticPrice||''
					})
				})


			},

			addMpChild(item, index) {
				this.addShow = true;
				this.mpChild = true;
				this.mpIndex = index;
				this.toGetPassengers(() => {
					let mpTemp = [];
					this.passengerList.forEach(p => {
						p.mpChildList.forEach(mp => {
							if (!item.mpChildList.find(imp => imp.card == mp.card)) mpTemp.push(mp)
						})
					})

					this.addList.forEach((d, i) => {
						if (item.mpChildList.find(p => p.card == d.card)) this.$set(this.addList[i],
							'isSelect', true);
						else this.$set(this.addList[i], 'isSelect', false);

						if (mpTemp.find(p => p.card == d.card)) this.$set(this.addList[i], 'mpSelected',
							true);
						else this.$set(this.addList[i], 'mpSelected', false);
					})
				})
			},
			// 添加乘客 
			toAddPassenger() {
				this.addShow = true;
				this.mpChild = false;
				this.toGetPassengers(() => {
					this.addList.forEach((d, i) => {
						if (this.passengerCarList.find(p => p.idcard == d.card)) this.$set(this.addList[i],
							'isDriver',
							true);
						else this.$set(this.addList[i], 'isDriver', false);

						if (this.passengerList.find(p => p.card == d.card)) this.$set(this.addList[i],
							'isSelect',
							true);
						else this.$set(this.addList[i], 'isSelect', false);
					})
				})
			},

			showTicketMx() {
				this.detailsShow = true;
				this.mpTicketNum = this.passengerList.reduce((cur, pre) => cur + pre.mpChildList.length, 0);
			},
			uToastShow(message) {
				this.$refs.uToast.show({
					message
				})
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-toast {
		position: relative;
		z-index: 10099;
	}

	.local_box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .2);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;

		.lb_content {
			width: calc(100% - 146rpx);
			background: url(https://i.ringzle.com/file/20240429/9ca472b33c094035a1d7a00f110ac59d.png) no-repeat;
			background-size: 100% 100%;
			border-radius: 24rpx;
			padding: 143rpx 38rpx 44rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 11;

			.lbc_tip {
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}

			.lbc_btn {
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #007A69;
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(13, 191, 253, 0.3);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin: 63rpx 24rpx 0;
			}

			.lbc_btns {
				width: calc(100% - 76rpx);
				height: 88rpx;
				margin: 63rpx 38rpx 0;
				display: flex;
				justify-content: space-between;

				&>view {
					width: calc(50% - 14rpx);
					height: 100%;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;

					&.lb_qx {
						border: 1rpx solid #007A69;
						color: #007A69;
					}

					&.lb_qd {
						background: #007A69;
						color: #FFFFFF;
					}
				}
			}

			image {
				width: 255rpx;
				height: 168rpx;
				position: absolute;
				left: 50%;
				margin-left: -127.5rpx;
				top: -60rpx;
				z-index: 12;
			}
		}
	}

	.page {
		position: relative;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 468rpx;
	}


	.num {
		display: flex;
		justify-content: space-between;
		// border-bottom: 1rpx solid #f0f2f5;

		.input {
			margin: 0 30rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		text {
			margin: 20rpx 0;

			&:nth-child(1) {
				font-size: 28rpx;
				color: #111;
				font-weight: 400;
			}

			&:nth-child(3) {
				font-size: 36rpx;
				color: #FF4141;
				margin-right: 40rpx;
			}

			&.icon {
				display: inline-block;
				width: 100rpx;
				flex: 1;
				text-align: right;
				padding-top: 12rpx;
			}
		}
	}

	.minus,
	.plus {
		border-radius: 6rpx;
		// text-align: center;
		width: 44rpx;
		height: 44rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .minus,
	// .plus {
	// 	display: flex;
	// 	align-items: center;
	// 	// width: 44rpx;
	// 	// height: 44rpx;
	// 	// line-height: 44rpx;
	// 	padding: 10rpx 10rpx;
	// 	// padding-left: 8rpx;

	// 	border: 1px solid #999;
	// 	border-radius: 6rpx;
	// 	text-align: center;
	// }

	// .plus {
	// 	background-color: #007A69;
	// 	border-color: #007A69;
	// }

	.hander-one {
		background-image: url('https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;

		.cardList {
			// margin: 30rpx 20rpx 6rpx;
			padding: 0 30rpx 140rpx;
			// background-color: #fff;
			background-color: #f5f8fa;
			// height: 210rpx;
			// width: 100%;
			border-radius: 20rpx;
			// padding: 40rpx 30rpx 36rpx;
			padding-bottom: 140rpx;
			// height: 100%;
		}
	}


	.tickets-two {
		margin-top: 42rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
		}

		.price {
			display: flex;
			justify-content: space-between;

			:nth-child(1) {
				font-size: 26rpx;
				color: #777777;
				margin: 20rpx 0;

			}

			:nth-child(2) {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
		}

		.text {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			line-height: 30rpx;
			color: #777777;
		}
	}

	.page {



		.info {
			position: relative;
			padding: 35rpx 48rpx;
			// background: linear-gradient(to right, #3092E0, #45B7DE);
			// background-color: #fff;
			border-radius: 16rpx;
			margin: 20rpx 0;

			.info-title {
				font-size: 34rpx;
				color: #111111;
				font-weight: 600;
			}

			.info-time {
				font-size: 28rpx;
				color: #999999;
			}


		}


		.content {
			padding: 40rpx 24rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.conten-left {
				.bg-purple {
					width: 36rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.bg-purple-light {
					font-size: 32rpx;
					color: #111111;
				}
			}

			.content-right {
				// background: #EDFBFF;
				width: 654rpx;
				height: 170rpx;
				border-radius: 16rpx;
				padding: 50rpx 20rpx;
				box-sizing: border-box;

				.bg-purple {
					font-size: 40rpx;
					color: #111111;
				}

				.bg-purple-light {
					border-left: 1rpx solid #999999;
					padding-left: 50rpx;
					width: 340rpx;

					.light-one,
					.light-two {
						display: flex;
						justify-content: space-between;

						.one {
							font-size: 30rpx;
							color: #111111;
						}

						.two {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

			}
		}


		.topInfo {
			position: relative;
			padding: 20rpx 24rpx 20rpx;
			background-color: #fff;
			// position: relative;
			// height: 238rpx;
			// margin-bottom: 20rpx;
			border-radius: 16rpx 16rpx 0 0;
			border-bottom: 1rpx solid #EFEFEF;


			.name {
				font-size: 32rpx;
				// color: #111;
				color: #999999;
				margin-bottom: 24rpx;
			}


		}

		.topInfo1 {
			padding: 20rpx 24rpx 6rpx;
			background-color: #fff;
			// position: relative;
			// height: 238rpx;
			// margin-bottom: 20rpx;
			border-radius: 0 0 16rpx 16rpx;


			.name {
				font-size: 32rpx;
				// color: #111;
				color: #999999;
				margin-bottom: 24rpx;
			}
		}

		.page-one {
			box-sizing: border-box;
			// padding: 24rpx 24rpx 0;
			background: #fff;
			border-radius: 16rpx;
		}

		.two-center-two {
			.df-one {
				font-size: 24rpx;
				color: #999999;

				.bg-purple-dark {
					text-align: center;
				}
			}

			.df-two {
				// border-bottom: 2rpx solid #f5f8fa;
				margin: 8rpx 0;

				.bg-purple,
				.bg-purple-dark {
					font-size: 36rpx;
					color: #111111;
					// text-align: center;

					text {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.bg-purple-dark {
					text-align: center;
				}

				.bg-purple-light {
					font-size: 24rpx;
					color: #666666;
					border: 1rpx solid #999999;
					text-align: center;
					border-radius: 50rpx;

				}

			}

			.cardList1 {

				.card-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: Bold;

				}

				.card-text {
					font-size: 24rpx;
					color: #808080;
					margin: 8rpx 0;
				}
			}
		}






		.content-two {
			padding: 40rpx 24rpx;
			background: #fff;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			margin-bottom: 20rpx;
		}


		.passenger {
			margin-top: 20rpx;
			padding: 40rpx 24rpx;
			background: #fff;
			border-radius: 16rpx;

			.p_title {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				span {
					margin-left: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 24rpx;
				}
			}

			.p_add {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 16rpx;
				// border: 1rpx dotted #007A69;
				background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 16rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					margin-left: 8rpx;
				}
			}
		}

		.contacts {
			margin-top: 20rpx;

			.c_info {
				padding: 40rpx 24rpx 28rpx;
				background: #fff;
				border-radius: 16rpx;

				&>text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				.ci_inp {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&.mt48 {
						margin-top: 48rpx;
					}

					text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}

					input {
						border: none;
						outline: none;
						text-align: right;

						&::placeholder {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
						}
					}
				}

				.ci_line {
					height: 1rpx;
					background: #EFEFEF;
					margin: 28rpx 0;
				}
			}

			.c_memo {
				background: #FFF9F4;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				padding: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
			}
		}

		.cellBox {
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
			// padding: 12rpx;
			margin: 24rpx 0;
			padding: 35rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.cellBox-left {
				display: flex;
				align-items: center;

				.icon {
					border-radius: 6rpx;
					background-color: #FF4141;
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					font-size: 20rpx;
					text-align: center;
					line-height: 30rpx;
					margin-right: 10rpx;
				}

				.title {

					color: #666666;
					font-size: 30rpx;
					font-weight: Regular;
					// margin-left: 260rpx;

				}
			}

			.cellBox-right {
				display: flex;
				width: 70%;
				justify-content: space-between;
				align-items: center;

				.cellBox-text {
					color: #AAAAAA;
					font-size: 28rpx;
					// margin-left: 260rpx;

				}

				.image {
					width: 24rpx;
					height: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}
		}



		.ci_inp_btn {
			margin-top: 20rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 98rpx;
			border-radius: 16rpx;
			padding: 0 16rpx;

			&.mt48 {
				margin-top: 48rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
			}

			input {
				border: none;
				outline: none;
				text-align: right;

				&::placeholder {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;
				}
			}
		}

		.agree {
			box-sizing: border-box;
			// margin: 24rpx 36rpx;
			display: flex;
			align-items: center;
			padding: 51rpx 0 51rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			text:nth-child(3) {
				color: #007A69;
				margin-left: 10rpx;
			}
		}


		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: calc(100% - 60rpx);
			background: #fff;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 16rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9;

			.b_left {
				display: flex;
				align-items: center;

				&>text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				&>view {
					color: #FF4141;
					display: flex;
					align-items: center;

					.b_span1 {
						display: block;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: Regular;

						margin-left: 16rpx;

					}

					.b_span {
						display: block;
						font-size: 48rpx !important;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FF4141;
					}
				}
			}

			.b_right {
				display: flex;
				align-items: center;

				.br_left {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}

				.br_right {
					width: 220rpx;
					height: 80rpx;
					// background: linear-gradient(90deg, #FF7D43 0%, #FEAC2C 100%);
					background-color: #007A69;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 24rpx;
				}
			}
		}

		.details {
			padding: 40rpx 30rpx 200rpx;
			min-height: 400rpx;
			// height: 70vh;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.address {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
			}

			.tickets {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 42rpx;

				&>text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				&>view {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					span {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 61rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				view {
					height: 36rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.d_middle {
				padding: 40rpx 0 150rpx;

				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 0;

					&:first-child {
						border-bottom: 1rpx solid #EFEFEF;
					}

					&>text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					&>view {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;

						span {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
							margin-left: 10rpx;
						}
					}
				}
			}

			&.details_pay {
				background: #F6F6F6;

				.wechat_pay {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 83rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 0rpx 0rpx;
					padding: 41rpx 24rpx;

					.wp_left {
						display: flex;
						align-items: center;

						image {
							width: 54rpx;
							height: 54rpx;
						}

						text {
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-left: 24rpx;
						}
					}

					&>image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.pay_submit {
					margin-top: 59rpx;
					height: 92rpx;
					background: #007A69;
					border-radius: 46rpx;
					line-height: 92rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}

			.has_info {
				.add_user {
					height: 88rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					margin-top: 48rpx;
					background-image: url('https://i.ringzle.com/file/20240415/5d72e22d58744b9bb740a3333d3d2b42.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;



					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #007A69;
						margin-left: 12rpx;
						letter-spacing: 2rpx;
					}
				}

				.add_list {
					padding-top: 30rpx;
					max-height: 478rpx;
					overflow-y: auto;

					.sac_item {
						display: flex;
						align-items: center;
						padding: 36rpx 24rpx;

						.chk {
							width: 38rpx;
							height: 38rpx;
						}

						.si_info {
							width: calc(100% - 96rpx);
							padding-left: 22rpx;

							.name {
								display: flex;
								align-items: center;

								view:first-child {
									font-size: 32rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #111111;
									line-height: 32rpx;
								}

								view:last-child {
									width: 88rpx;
									height: 36rpx;
									line-height: 36rpx;
									text-align: center;
									background: #F5F8FA;
									border-radius: 8rpx;
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #94A9C8;
									margin: 5rpx 0 0 28rpx;
								}
							}

							.idcard {
								margin-top: 20rpx;

								&>text {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #111111;
									line-height: 24rpx;

									&:first-child {
										color: #AAAAAA;
										margin-right: 10rpx;
									}
								}
							}
						}

						.edit {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}

			.add_submit {
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				position: fixed;
				bottom: 69rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}

		.notice_info {
			width: 100%;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			background: #FFFDF7;
			display: flex;
			align-items: flex-start;
			margin-top: -20rpx;

			text {
				padding-left: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FEA400;
				line-height: 33rpx;
			}
		}

		.passengers {
			.p_item_new {
				margin-top: 32rpx;

				.pin_top {
					display: flex;
					align-items: center;

					.p_del {
						width: 36rpx;
						height: 36rpx;
					}

					.pint_right {
						width: calc(100% - 36rpx);
						padding-left: 20rpx;
						box-sizing: border-box;

						.pintr_info {
							display: flex;
							align-items: center;

							.name {
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #333333;
								line-height: 32rpx;
							}

							.card {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								line-height: 24rpx;
								margin-left: 16rpx;
							}

							.type {
								width: 82rpx;
								height: 32rpx;
								background: rgba(0, 122, 105, 0.05);
								border-radius: 8rpx;
								line-height: 32rpx;
								text-align: center;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #94A9C8;
								margin-left: 8rpx;
							}
						}

						.pintr_add {
							margin-top: 32rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #333333;
								line-height: 28rpx;
							}

							.add {
								display: flex;
								align-items: end;

								span {
									color: #007A69;
									font-size: 22rpx;
								}

								text {
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 26rpx;
									color: #007A69;
									line-height: 26rpx;
								}
							}
						}
					}
				}

				.pin_childs {
					margin-top: 32rpx;
					width: 100%;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					background: #F4F9F8;

					.pc_item {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						&:first-child {
							margin-top: 0;
						}

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							line-height: 24rpx;
						}

						.name {
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #666666;
							line-height: 32rpx;
							margin-left: 19rpx;
						}

						.card {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							margin-left: 16rpx;
						}

						.type {
							width: 92rpx;
							height: 32rpx;
							background: rgba(0, 122, 105, 0.05);
							border-radius: 8rpx;
							margin-left: 12rpx;
							line-height: 32rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #94A9C8;
						}
					}
				}
			}
		}
	}
</style>
<style>
	.u-swipe-action-item__right__button__wrapper {
		background: #F55454 !important;
		font-size: 32rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 2rpx;
	}
</style>